<template>
  <div class="ygglym_box">
    <div class="header_sele">
      <a-button type="primary" @click="addchil">添加子账户</a-button>
      <a-input placeholder="请输入关键字" @change="getkeywords" v-model="keywords" style="width:300px"></a-input>
    </div>
    <div class="chil_box" v-if="addchilflag">
      <div class="chil_inp_box">
        <h4>
          <span>添加子账户</span>
          <a-icon @click="close" type="close" class="chil_close" />
        </h4>
        <ul>
          <li>
            <span class="tit">
              <span class="xing">*</span>姓名：
            </span>
            <a-input v-model="username" placeholder="请输入姓名" />
          </li>
          <li>
            <span class="tit">
              <span class="xing">*</span>手机：
            </span>
            <a-input v-model="phone" placeholder="请输入手机号码" />
          </li>

          <li class="btn_li">
            <a-button type="primary" @click="subchil">提交</a-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="yggl_bg appstyle">
      <a-table
        @change="handleChangelist"
        :loading="loading"
        :columns="columns"
        :pagination="pagination"
        :dataSource="data"
        bordered
      >
        <template v-for="colqq in ['QQ']" :slot="colqq" slot-scope="text, record, index">
          <div :key="colqq">
            <a-input
              v-if="record.editable"
              v-model="qq"
              style="width:200px;"
              :value="text"
              placeholder="请输入QQ号码"
            />
            <template v-else>{{text}}</template>
          </div>
        </template>
        <template v-for="col in ['SFGLY']" :slot="col" slot-scope="text, record, index">
          <div :key="col">
            <a-radio-group
              v-if="record.editable"
              @change="handleChange(radiovalue, record.key, col)"
              v-model="radiovalue"
            >
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>

            <template v-else>{{text}}</template>
          </div>
        </template>
        <template slot="pricemanage" slot-scope="text, record, index">
          <div>
            <a-checkbox-group @change="jgqxChange" v-model="record.pricemanage_list">
              <!-- <a-row> -->
              <!-- <a-col class="col_check"  :span="6"> -->
              <a-checkbox value="WLTEJIA" @click="jgqxitem(record)">特价</a-checkbox>
              <!-- </a-col> -->
              <!-- <a-col class="col_check"  :span="6"> -->
              <a-checkbox value="WLLSJ" @click="jgqxitem(record)">价格1</a-checkbox>
              <!-- </a-col> -->
              <!-- <a-col class="col_check" :span="6"> -->
              <a-checkbox value="WLPFJ" @click="jgqxitem(record)">价格2</a-checkbox>
              <!-- </a-col> -->
              <!-- <a-col class="col_check"  :span="6"> -->
              <a-checkbox value="WLZDJ" @click="jgqxitem(record)">价格3</a-checkbox>
              <!-- </a-col> -->
              <!-- <a-col class="col_check"  :span="6"> -->
              <a-checkbox value="PAIJIA" @click="jgqxitem(record)">牌价</a-checkbox>
              <!-- </a-col> -->
              <!-- </a-row> -->
            </a-checkbox-group>
          </div>
        </template>

        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-popconfirm
              v-if="!record.editable"
              title="确定删除吗?"
              class="del"
              @confirm="() => ybdelete(record,record.key)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
            <!-- 是否超级管理员修改------- -->
            <span v-if="record.editable">
              <a class="del" @click="() => save(record.key,record)">保存</a>
              <a-popconfirm title="确认取消吗?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a class="del" @click="()=>xiugai(record,record.key)">修改</a>
            </span>

            <a-popconfirm
              v-if="!record.editable"
              class="del"
              title="确定初始化密码?"
              @confirm="()=>toybgl(record)"
            >初始化密码</a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "手机",
    dataIndex: "SJHM"
  },
  {
    title: "名称",
    dataIndex: "username"
  },
  // 后面修改要加上

  {
    title: "QQ",
    dataIndex: "QQ",
    scopedSlots: { customRender: "QQ" }
  },
  {
    title: "价格权限",
    dataIndex: "pricemanage",
    scopedSlots: { customRender: "pricemanage" },
    width: 400
  },

  // 后面修改要加上

  {
    title: "是否管理员",
    dataIndex: "SFGLY",
    scopedSlots: { customRender: "SFGLY" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
import qs from "qs";
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      serchvalue: "",
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      loading: true,
      dataSource: [],
      // radio:'',
      radiovalue: "是",
      qq: "",
      ygidnum: "",
      addchilflag: false,
      phone: "",
      username: "",
      keywords: "",
      data_list: "",
      pricemanage_list: ""
    };
  },

  methods: {
    addchil() {
      this.addchilflag = true;
    },
    close() {
      this.addchilflag = false;
      this.phone = "";
      this.username = "";
    },
    subchil() {
      if (this.phone != "" && this.username != "") {
        this.axios
          .post(
            "huiyuan/AddChildMember.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              phone: this.phone,
              username: this.username
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.phone = "";
              this.username = "";
              this.addchilflag = false;
              this.handleChangelist();
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "请将内容填写完整！"
        });
      }
    },
    handleChange(value, key, column) {
      // const newData = [...this.data];
      // const target = newData.filter(item => key === item.key)[0];
      // if (target) {
      //   target[column] = value;
      //   this.data = newData;
      // }
    },

    //修改
    xiugai(value, key) {
      this.ygidnum = value.id_num;
      this.radiovalue = value.SFGLY;
      this.qq = value.QQ;
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target.editable = true;
        this.data = newData;
      }
      this.cancel();
    },
    save(key, value) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        delete target.editable;
        this.data = newData;
        this.cacheData = newData.map(item => ({ ...item }));
      }

      this.axios
        .post(
          "set/childUserEdit.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            //  username:value.username,
            id_num: value.id_num,
            qq: value.QQ,
            sfgly: this.radiovalue
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.handleChangelist();
          } else {
            this.handleChangelist();
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    jgqxitem(item) {
      console.log(item);
      this.data_list = item;
    },
    jgqxChange(checkedValues) {
      var checkedValues = checkedValues.toString();

      setTimeout(() => {
        this.axios
          .post(
            "set/childUserPriceEdit.php",
            qs.stringify({
              sqdwid: this.data_list.sqdwid,
              phone: this.data_list.SJHM,
              priceManage: checkedValues
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.handleChangelist();
            } else {
              this.handleChangelist();
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }, 500);
      console.log(checkedValues);
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    getkeywords() {
      this.handleChangelist();
    },
    //
    handleChangelist() {
      this.axios
        .post(
          "set/getChildUserList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            keyWords: this.keywords
          })
        )
        .then(res => {
          console.log(res);
          this.loading = false;

          if (res.data.code == 303) {
            this.loading = false;
            for (var i = 0; i < res.data.result.length; i++) {
              res.data.result[i].key = i;
              if (res.data.result[i].pricemanage) {
                res.data.result[i].pricemanage_list = res.data.result[
                  i
                ].pricemanage.split(",");
                console.log(res.data.result[i].pricemanage_list);
                //  this.pricemanage_list=res.data.result[i].pricemanage.split(",")
                if (res.data.result[i].pricemanage.indexOf("WLTEJIA") != -1) {
                  res.data.result[i].WLTEJIA_ok = 1;
                }
                if (res.data.result[i].pricemanage.indexOf("WLLSJ") != -1) {
                  res.data.result[i].WLLSJ_ok = 1;
                }
                if (res.data.result[i].pricemanage.indexOf("WLPFJ") != -1) {
                  res.data.result[i].WLPFJ_ok = 1;
                }
                if (res.data.result[i].pricemanage.indexOf("WLZDJ") != -1) {
                  res.data.result[i].WLZDJ_ok = 1;
                }
                if (res.data.result[i].pricemanage.indexOf("PAIJIA") != -1) {
                  res.data.result[i].PAIJIA_ok = 1;
                }
              }
            }

            this.data = res.data.result;
            console.log(this.data);
          } else {
            this.data = [];
          }
        });
    },

    //删除客户列表
    ybdelete(value, key) {
      const dataSource = [...this.data];
      this.data = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "set/childUserDelete.php",
          qs.stringify({
            id_num: value.id_num,
            phone: value.SJHM,
            sqdwid: value.sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    // xiugai(value) {
    //   console.log(value);
    // },+
    toybgl(value) {
      this.axios
        .post(
          "set/resetChildPassword.php",
          qs.stringify({
            phone: value.SJHM,
            sqdwid: value.sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },

  created() {
    this.handleChangelist();
  }
};
</script>

<style lang='less'>
.ygglym_box {
  .header_sele {
    position: absolute;
    top: 55px;
    text-align: right;
    width: 98% !important;
    left: 1%;
    background-color: #fff;
    box-shadow: 5px 5px 5px #ccc;
    padding: 10px 20px;
    text-align: right;
    margin: 10px 0 !important;
    // .sele {
    //   position: relative;
    //   display: inline-block;
    //   .search {
    //     position: absolute;
    //     top: 8px;
    //     right: 15px;
    //     font-size: 18px;
    //   }
    // }
  }
  .col_check {
    text-align: left;
  }
  .chil_box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 1000px;
    background: rgba(0, 0, 0, 0.5);
    .chil_inp_box {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40%;
      height: 300px;
      background: #fff;
      h4 {
        text-align: left;
        padding: 15px 35px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        color: #666;
        .chil_close {
          font-size: 20px;
        }
      }
      ul {
        text-align: left;
        margin: 20px 65px;

        li {
          margin: 20px 0;
          input {
            font-size: 14px;
            width: 300px;
          }
          .tit {
            .xing {
              color: red;
              margin-right: 10px;
            }
          }
        }
        .btn_li {
          text-align: center;
          margin-top: 60px;
        }
      }
    }
  }
  .yggl_bg {
    width: 80%;
    height: auto;
    position: relative;
    top: 130px !important;
    left: 250px;
    .ant-table-thead {
      background-color: #ccc !important;
    }
    .ant-table-tbody {
      background: #fff !important;
    }
    .add_qy {
      width: 100%;
      text-align: right;
      padding: 10px 0;
      height: 65px !important;
      background-color: #fff;
      margin: 10px 0;
      .ant-input {
        display: inline-block !important;
        width: 200px;
        height: 30px !important;
        font-size: 14px;
      }
      .add_in {
        display: inline-block;
        text-align: left;
        margin: 0 10px;
        .ant-btn {
          padding: 0 5px;
        }
      }
      .btn {
        margin-right: 10px;
      }
    }
    .ant-table-wrapper {
      background: #fff !important;
    }
    .del {
      padding-right: 15px;
      color: #40a9ff;
      cursor: pointer;
    }
  }
  .ant-spin-nested-loading > div > .ant-spin {
    top: 100px !important;
  }
}
</style>
